<template>
  <div class="main-content">
    <div class="project-table">
      <div class="table-header">
        <div>项目id</div>
        <div>项目信息</div>
        <div>负责人</div>
        <div>状态</div>
        <div>条目详情</div>
        <div>时间</div>
        <div>操作</div>
      </div>

      <div v-if="!projects || projects.length === 0" class="empty-state">
        <h3>暂无项目</h3>
        <p>没有找到符合条件的项目</p>
      </div>

      <ProjectRow v-for="project in projects" :key="project.id" :project="project" @view="handleView" @edit="handleEdit"
        @trend="handleTrend" />
    </div>

    <!-- 项目详情弹窗 -->
    <ProjectModal v-model:visible="modalVisible" :project="selectedProject" :mode="modalMode" @save="handleSave"
      @delete="handleDelete" />

    <!-- 项目趋势分析弹窗 -->
    <ProjectTrendModal v-model:visible="trendModalVisible" :project="trendProject" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ProjectRow from './ProjectRow.vue'
import ProjectModal from './ProjectModal.vue'
import ProjectTrendModal from './ProjectTrendModal.vue'
import type { Project } from '../types'

defineProps<{
  projects: Project[]
}>()

const emit = defineEmits<{
  'update-project': [project: Project]
  'delete-project': [project: Project]
}>()

const modalVisible = ref(false)
const selectedProject = ref<Project | null>(null)
const modalMode = ref<'view' | 'edit'>('view')

const trendModalVisible = ref(false)
const trendProject = ref<Project | null>(null)

const handleView = (project: Project) => {
  selectedProject.value = project
  modalMode.value = 'view'
  modalVisible.value = true
}

const handleEdit = (project: Project) => {
  selectedProject.value = project
  modalMode.value = 'edit'
  modalVisible.value = true
}

const handleSave = (project: Project) => {
  emit('update-project', project)
  modalVisible.value = false
}

const handleDelete = (project: Project) => {
  emit('delete-project', project)
  modalVisible.value = false
}

const handleTrend = (project: Project) => {
  trendProject.value = project
  trendModalVisible.value = true
}
</script>

<style scoped>
.main-content {
  padding: 30px;
}

.project-table {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.table-header {
  background: #f9fafb;
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
  display: grid;
  grid-template-columns: 0.6fr 1.8fr 0.8fr 0.8fr 2.5fr 0.9fr 120px;
  gap: 15px;
  font-weight: 600;
  font-size: 14px;
  color: #374151;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
}

.empty-state h3 {
  margin-bottom: 8px;
  color: #374151;
}
</style>